<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2016/4/19
  Time: 11:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/view/common/jsp_top.jsp" %>
<div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <%-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>--%>
            <a class="navbar-brand" href="index.html">陌与尘埃管理系统</a>
        </div>
        <!-- Top Menu Items -->
        <ul class="nav navbar-right top-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> <b
                        class="caret"></b></a>
                <ul class="dropdown-menu message-dropdown">
                    <li class="message-preview">
                        <a href="#">
                            <div class="media">
                                    <span class="pull-left">
                                        <img class="media-object" src="http://placehold.it/50x50" alt="">
                                    </span>
                                <div class="media-body">
                                    <h5 class="media-heading"><strong>管理员</strong>
                                    </h5>
                                    <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message-preview">
                        <a href="#">
                            <div class="media">
                                    <span class="pull-left">
                                        <img class="media-object" src="http://placehold.it/50x50" alt="">
                                    </span>
                                <div class="media-body">
                                    <h5 class="media-heading"><strong>John Smith</strong>
                                    </h5>
                                    <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message-preview">
                        <a href="#">
                            <div class="media">
                                    <span class="pull-left">
                                        <img class="media-object" src="http://placehold.it/50x50" alt="">
                                    </span>
                                <div class="media-body">
                                    <h5 class="media-heading"><strong>John Smith</strong>
                                    </h5>
                                    <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message-footer">
                        <a href="#">Read All New Messages</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i> <b
                        class="caret"></b></a>
                <ul class="dropdown-menu alert-dropdown">
                    <li>
                        <a href="#">Alert Name <span class="label label-default">Alert Badge</span></a>
                    </li>
                    <li>
                        <a href="#">Alert Name <span class="label label-primary">Alert Badge</span></a>
                    </li>
                    <li>
                        <a href="#">Alert Name <span class="label label-success">Alert Badge</span></a>
                    </li>
                    <li>
                        <a href="#">Alert Name <span class="label label-info">Alert Badge</span></a>
                    </li>
                    <li>
                        <a href="#">Alert Name <span class="label label-warning">Alert Badge</span></a>
                    </li>
                    <li>
                        <a href="#">Alert Name <span class="label label-danger">Alert Badge</span></a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">View All</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> 管理员 <b
                        class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-fw fa-envelope"></i> Inbox</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
                    </li>
                </ul>
            </li>
        </ul>
        <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul id="menu" class="ztree nav navbar-nav side-nav" style=" overflow:auto;"></ul>
        </div>
        <!-- /.navbar-collapse -->
    </nav>

    <div id="page-wrapper" >
        <ul class="nav nav-tabs" id="myTab">
            <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="home">welcome</div>
        </div>
    </div>
    <!-- /#page-wrapper -->

</div>
<script>
    var zTree;
    var demoIframe;

    function addHoverDom(treeId, treeNode) {
        var sObj = j("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || j("#addBtn_" + treeNode.tId).length > 0) return;
        var addStr = "<span class='button remove' id='removeBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";

        addStr += "<span class='button add' id='addBtn_" + treeNode.tId + "'></span>";
        addStr += "<span class='button edit' id='editBtn_" + treeNode.tId + "'></span>";
        sObj.after(addStr);
        var btn = j("#addBtn_" + treeNode.tId);
        if (btn) btn.bind("click", function () {
            var zTree = j.fn.zTree.getZTreeObj("menu");
            zTree.addNodes(treeNode, {id: (1000 + newCount), pId: treeNode.id, name: "new node" + (newCount++)});
            return false;
        });
    }
    ;

    function removeHoverDom(treeId, treeNode) {
        j("#addBtn_" + treeNode.tId).unbind().remove();
        j("#removeBtn_" + treeNode.tId).unbind().remove();
        j("#editBtn_" + treeNode.tId).unbind().remove();
    }
    ;

    var setting = {
        check: {
            enable: true
        },
        view: {
//            addHoverDom: addHoverDom,
//            removeHoverDom: removeHoverDom,
            dblClickExpand: true,
            showLine: true,
            selectedMulti: true
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {
            beforeClick: function (treeId, treeNode) {
                var zTree = j.fn.zTree.getZTreeObj("menu");
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    return false;
                } else {
                    _addTab(treeNode);
                    return true;
                }
            }
        }
    };

    var zNodes;

    j(document).ready(function () {
        j.ajax({
            async: false,
            cache: false,
            type: 'Get',
            url: 'menu/load',
            dataType: "json", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可设置为json
            success: function (data) {
                zNodes = eval("[" + data + "]"); //将string类型转换成json对象
                var t = j("#menu");
                t = j.fn.zTree.init(t, setting, zNodes);
                demoIframe = j("#testIframe");
                demoIframe.bind("load", loadReady);
                var zTree = j.fn.zTree.getZTreeObj("menu");
                zTree.selectNode(zTree.getNodeByParam("id", 0));
            },
            error: function (msg) {
                alert(" 数据加载失败！" + msg);
            }
        });


    });

    function loadReady() {
        var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
                htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
                maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
                h = demoIframe.height() >= maxH ? minH : maxH;
        if (h < 530) h = 530;
        demoIframe.height(h);
    }

    function _addTab(treeNode){
        var _title = treeNode.name;
        var _menuID = treeNode.id;
        var _path = treeNode.path;
        var _isNewTab = true;
        //判断是否已有该tab，如果已有，则激活
        j("#myTab li").each(function (i) {
            var _originalId = j(this).attr("id");
            if ((_originalId) == ("tab_" + _menuID)) {
                _isNewTab = false;
            }
        });
        if (_isNewTab) {
            var _tabHTML = "<li id='tab_" + _menuID + "'><a href='#panel_" + _menuID + "' data-toggle='tab'>" + _title + "</a></li>";
            j("#myTab li:last").after(_tabHTML);

            var _panelHTML = "<div class='tab-pane' id='panel_" + _menuID + "'><iframe scrolling='auto' frameborder='0' style='width: 100%;height: 100%;' src='" + _path + "'></iframe></div>";
            j(".tab-content div:last").after(_panelHTML);
        }

        j("#tab_" + _menuID).siblings().removeClass("active");
        j("#tab_" + _menuID).addClass("active");
        j("#panel_" + _menuID).siblings().removeClass("active");
        j("#panel_" + _menuID).addClass("active");
        j("#panel_" + _menuID).show();
    }

    //TAB选项卡切换
    j("#myTab li a").click(function (e) {
        e.preventDefault();//阻止a标签跳转
        j(this).tab('show');
    })
</script>

<%@include file="/WEB-INF/view/common/jsp_bottom.jsp" %>